<template>
  <div>
    <page-header title="用户信息" back sticky></page-header>
    <page-dialog :open.sync="bindMobileDialogShow" title="弹窗标题">
      <el-steps :active="0" finish-status="success">
        <el-step title="解绑"></el-step>
        <el-step title="绑定新手机号"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!-- 绑定手机 分以下情况 -->
      <!-- 1. 没有绑定过手机号（绑定） -->
      <!-- 2. 已经绑定了手机号（换绑）-->
      <!-- 绑定手机流程 -->
      <!-- 1. 输入绑定手机 -->
      <!-- 2. 输入验证码 -->
      <!-- 3. 提交验证码 -->
      <!-- 换绑手机流程 -->
      <!-- 1. 向原手机号发送验证码 -->
      <!-- 2. 输入原手机号验证码 -->
      <!-- 3. 输入新的手机号码 -->
      <!-- 4. 向新手机发送验证码 -->
      <!-- 5. 输入新手机验证码 -->
      <!-- 6. 提交验证码 -->
    </page-dialog>
    <page-main class="overall-flex main" background="transparent" padding="0px">
      <div class="main-left">
        <div>
          <div class="user-avatar overall-flex overall-justify-center">
            <avatar
              :size="90"
              :src="userInfo.avatar"
              @click="clickAvatar"
              @edit="clickEditAvatar"
            ></avatar>
          </div>
          <div class="user-name overall-text-center">
            <p>用户名</p>
          </div>
          <div class="user-case overall-flex overall-align-center">
            <div class="case-li"></div>
            <div class="case-li"></div>
            <div class="case-li"></div>
          </div>

          <div class="user-base-list overall-flex-wrap">
            <div class="base-li">
              <i class="base-li-icon icon-chengshi overall-icon"></i>
              <span class="base-li-span">某某公司 - 研发部 - 某某组</span>
            </div>
            <div class="base-li">
              <i class="base-li-icon icon-yonghu3 overall-icon"></i>
              <span class="base-li-span">资深前端工程师</span>
            </div>
            <div class="base-li">
              <i class="base-li-icon icon-ditu overall-icon"></i>
              <span class="base-li-span">中国 • 浙江省 • 杭州市</span>
            </div>
            <div class="base-li">
              <i class="base-li-icon icon-xiaoxi4 overall-icon"></i>
              <span class="base-li-span">JavaScript、HTML、CSS</span>
            </div>
          </div>
          <pageLine color="gray" size="1" margin="0px 0px 0px 0px"></pageLine>
        </div>
        <div class="user-case overall-flex overall-align-center">
          <div class="case-li case-li-button black-button">
            <i class="overall-icon icon-heimingdan3"></i>拉黑
          </div>
          <div
            class="case-li case-li-button remove-button"
            @click="clickRemoveUser"
          >
            <i class="overall-icon icon-heimingdan3"></i>

            删除
          </div>
            <div class="case-li case-li-button black-button">
            <i class="overall-icon icon-heimingdan3"></i>限制
          </div>
        </div>
      </div>
      <div class="main-right overall-flex-1 overall-flex overall-flex-column">
        <div class="tabs-options overall-flex overall-flex-align-center">
          <div
            class="tabs-options-li"
            v-for="tag in tags"
            :key="tag.value"
            @click="clickTabs(tag.value)"
          >
            <div class="tabs-options-li-content">{{ tag.name }}</div>
            <div class="tabs-options-li-active"></div>
          </div>
        </div>
        <div class="tabs-content-swiper overall-flex-1">
          <!-- 权限管理 -->
          <div class="tabs-content-swiper-li" v-if="tagCurrent == 1">
            <el-button type="primary" size="small" @click="clickAddRole"
              >添加角色</el-button
            >
            <el-table :data="userRolesTable" style="width: 100%">
              <el-table-column prop="date" label="角色"> </el-table-column>
              <el-table-column prop="name" label="标识"> </el-table-column>
              <el-table-column prop="address" label="获得时间">
              </el-table-column>
              <el-table-column label="操作" width="110" align="center">
                <template slot-scope="scope">
                  <el-link type="danger" @click="clickRemoveRole(scope.row)"
                    >删除</el-link
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 安全管理 -->
          <div class="tabs-content-swiper-li" v-if="tagCurrent == 2">
            <div class="anquan-box">
              <div
                class="anquan-box-li"
                v-for="(item, index) in userContact"
                :key="index"
              >
                <i
                  class="overall-icon icon-fanyi2 anquan-box-li-icon"
                  :class="item.icon"
                ></i>
                <div class="li-content">
                  <div class="overall-flex overall-flex-column">
                    <span class="li-content-key overall-text-color-draw">{{
                      item.key
                    }}</span>
                    <span class="li-content-value overall-text-color-gray">{{
                      item.value || item.defaultValue
                    }}</span>
                  </div>

                  <span class="li-content-status" @click="clickBindMobile">{{
                    item.value || "点击绑定"
                  }}</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 个人信息 -->
          <div class="tabs-content-swiper-li" v-if="tagCurrent == 0">
            <div class="descriptions-box">
              <el-descriptions
                title="用户信息"
                :column="2"
                :colon="false"
                border
              >
                <el-descriptions-item label="用户">{{
                  userInfo.username || "-"
                }}</el-descriptions-item>
                <el-descriptions-item label="ID">{{
                  userInfo.id || "-"
                }}</el-descriptions-item>
                <el-descriptions-item label="昵称">{{
                  userInfo.nickname || "-"
                }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{
                  userInfo.gender
                }}</el-descriptions-item>

                <el-descriptions-item label="出生日期">-</el-descriptions-item>
                <el-descriptions-item label="年龄">-</el-descriptions-item>
                <el-descriptions-item label="星座">-</el-descriptions-item>
                <el-descriptions-item label="最近登录时间">{{
                  userInfo.last_login_time | turnTime
                }}</el-descriptions-item>
                <el-descriptions-item label="最近登录IP">{{
                  userInfo.last_login_ip
                }}</el-descriptions-item>
                <el-descriptions-item label="最近登录IP地区"
                  >-</el-descriptions-item
                >
                <el-descriptions-item label="备注">-</el-descriptions-item>
                <el-descriptions-item label="状态">{{
                  userInfo.state
                }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="descriptions-box">
              <el-descriptions
                title="所在地区"
                :column="2"
                :colon="false"
                border
              >
                <el-descriptions-item label="省份">-</el-descriptions-item>
                <el-descriptions-item label="城市">-</el-descriptions-item>
                <el-descriptions-item label="区县">-</el-descriptions-item>
                <el-descriptions-item label="详细地址">-</el-descriptions-item>
                <el-descriptions-item label="经度">-</el-descriptions-item>
                <el-descriptions-item label="维度">-</el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="descriptions-box">
              <el-descriptions
                title="联系方式"
                :column="2"
                :colon="false"
                border
              >
                <el-descriptions-item label="手机号">-</el-descriptions-item>
                <el-descriptions-item label="邮箱">-</el-descriptions-item>
                <el-descriptions-item label="微信">-</el-descriptions-item>
                <el-descriptions-item label="QQ">-</el-descriptions-item>
                <el-descriptions-item label="抖音">-</el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="descriptions-box">
              <el-descriptions
                title="注册信息"
                :column="2"
                :colon="false"
                border
              >
                <el-descriptions-item label="注册IP">{{
                  userInfo.register_ip
                }}</el-descriptions-item>
                <el-descriptions-item label="注册时间">{{
                  userInfo.register_time | turnTime
                }}</el-descriptions-item>
                <el-descriptions-item label="注册IP地区"
                  >-</el-descriptions-item
                >
                <el-descriptions-item label="注册方式">-</el-descriptions-item>
                <el-descriptions-item label="注册端口">-</el-descriptions-item>
                <el-descriptions-item label="注册端口品牌"
                  >-</el-descriptions-item
                >
                <el-descriptions-item label="注册端口型号"
                  >-</el-descriptions-item
                >
                <el-descriptions-item label="注册天数">
                  {{userInfo.register_time | userRegiestDay}}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>
      </div>
    </page-main>
    <page-dialog title="添加角色" :open.sync="addRoleDialogShow">
      <rolesList :remove="false" @add="addUserRole"></rolesList>
    </page-dialog>
  </div>
</template>

<script>
import dayJs from "dayjs";
import rolesList from "~/roles-list/roles-list.vue";
import pageLine from "~/line/line.vue";
import pageMain from "~/page-main/page-main.vue";
import pageHeader from "~/page-header/page-header.vue";
import pageDialog from "../../assets/overall/components/page-dialog/page-dialog.vue";
import avatar from "~/avatar/avatar.vue";
import API from "@/api";
export default {
  computed: {
    userContact() {
      let { email, mobile, qq, wechat } = this.userInfo.contact;
      let contact = [
        {
          icon: "icon-shouji",
          name: "mobile",
          key: "手机号",
          value: mobile,
          defaultValue: "未绑定",
          bindValue: "",
        },
        {
          icon: "icon-QQ",
          name: "qq",
          key: "QQ",
          value: qq,
          defaultValue: "未绑定",
          bindValue: "",
        },
        {
          icon: "icon-weixin",
          name: "wechat",
          key: "微信",
          value: wechat,
          defaultValue: "未绑定",
          bindValue: "",
        },
        {
          icon: "icon-youjian",
          name: "email",
          key: "邮箱",
          value: email,
          defaultValue: "未绑定",
          bindValue: "",
        },
        {
          icon: "icon-renzheng1",
          name: "email",
          key: "密保问题",
          value: email,
          defaultValue: "未设置",
          bindValue: "",
        },
        {
          icon: "icon-mima",
          name: "email",
          key: "登录限制",
          value: email,
          defaultValue: "未限制",
          defualtValueColor: "",
          bindValue: "",
        },
      ];
      return contact;
    },
  },
  filters: {
    // 用户注册天数换算
    userRegiestDay(date) {
      let oldDate = dayJs(date);
      let now = dayJs(Date.now());
      let result = now.diff(oldDate, "day")
      return Math.abs(result) + '天'
      
    },
  },

  mounted() {
    let { userid } = this.$route.query;
    console.log(userid);

    console.log("收到的参数：", this.$route.query);

    if (userid) {
      API.user
        .info({
          id: userid,
        })
        .then((res) => {
          let userinfo = res.data.userInfo;
          this.userInfo = res.data.userInfo;
          console.log(userinfo);
        })
        .catch((err) => {
          console.log("失败", err);
        });
    }
  },
  components: { pageMain, pageHeader, avatar, pageDialog, pageLine, rolesList },
  data() {
    return {
      bindMobileDialogShow: false,
      addRoleDialogShow: false,
      userRolesTable: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "2023年6月16日23:22:09",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "2023年6月16日23:22:09",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "2023年6月16日23:22:09",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "2023年6月16日23:22:09",
        },
      ],
      userId: null,
      userInfo: {},
      tagCurrent: 0,
      tags: [
        {
          name: "个人信息",
          value: 0,
        },
        {
          name: "角色权限",
          value: 1,
        },
        {
          name: "安全管理",
          value: 2,
        },
        {
          name: "行为日志",
          value: 3,
        },
        {
          name: "客户端管理",
          value: 3,
        },
      ],
    };
  },
  methods: {
    addUserRole(e) {
      console.log("添加用户角色");
      console.log(e);
      this.$message({
        message: "添加成功",
        type: "success",
      });
    },
    // 点击添加角色
    clickAddRole() {
      this.addRoleDialogShow = true;
    },
    clickRemoveRole(e) {
      console.log(e);
    },

    // 点击绑定手机
    clickBindMobile() {
      this.bindMobileDialogShow = true;
    },

    clickAvatar() {
      console.log("点击了头像");
    },
    clickEditAvatar() {
      console.log("点击了头像更换");
    },

    clickTabs(index) {
      this.tagCurrent = index;
      console.log(index);
    },
    getUserInfo() {},
    clickRemoveUser() {},
  },
};
</script>

<style scoped lang="scss">
.main {
  gap: 15px;
}
.main-left {
  width: 300px;
  height: 505px;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 25px;
  padding-bottom: 25px;
  box-sizing: border-box;
}

.main-right {
  gap: 15px;
}
.tabs-options {
  background: white;
}
.tabs-content {
  background: white;
  height: 600px;
}

.tabs-content-swiper {
  background: white;
}
.tabs-content-swiper-li {
  width: 100%;
  height: 100%;
  padding: 25px;
  box-sizing: border-box;
}
.user-avatar {
  margin: 15px 0px;
}

.user-name {
  font-size: 1.4rem;
  margin-top: 10px;
}

.tabs-options-li {
  text-align: center;
  height: 45px;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
}

.tabs-options-li:hover .tabs-options-li-active {
  height: 4px;
}
.tabs-options-li-content {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0px 15px;
}
.tabs-options-li-active {
  transition: 0.1s height linear;
  height: 0px;
  width: 100%;
  background: orangered;
}

.descriptions-box {
  margin-bottom: 18px;
}
.anquan-box {
}
.anquan-box-li {
  border-bottom: 1px solid #f8f2f2;
  padding: 20px 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.li-content {
  margin-left: 15px;
  flex: 1;
  height: 100%;

  justify-content: space-between;
  display: flex;
  align-items: center;
}
.li-content-key {
  font-size: 0.8rem;
}
.li-content-value {
  font-size: 0.8rem;
  margin-top: 4px;
}
.anquan-box-li-icon {
  font-size: 1.9rem;
}
.li-content-status {
  font-size: 0.8rem;
}

.user-case {
  gap: 15px;
  padding: 15px 0px;
  padding-bottom: 0px;
}
.case-li {
  height: 55px;
  flex: 1;
  background: rgba(245, 240, 240, 0.664);
}
.case-li-button {
  border-radius: 4px;
  --height: 20px;
  height: var(--height);
  line-height: var(--height);
  text-align: center;
  background: transparent;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.case-li-button i {
  font-size: 1.1rem;
}

.black-button {
  color: rgb(75, 74, 74);
}
.remove-button {
  color: red;
}

.user-base-list {
  padding: 20px 0px;
  display: flex;
  flex-direction: column;
  padding-top: 15px;
}
.base-li {
  height: 42px;
  display: flex;
  align-items: center;
}
.base-li-span {
  font-size: 0.9rem;
}
.base-li-icon {
  font-size: 1.2rem;
  margin-right: 15px;
  color: $colorGrayDark;
}
.user-tag-list {
  height: 100px;
}
</style>
